<template>
  <div class="zhiboxiaoshou_fabu">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou' }">直播销售</el-breadcrumb-item>
            <el-breadcrumb-item>发布直播页</el-breadcrumb-item>
          </el-breadcrumb>

          <div class="flex">
            <div class="fleft">
              <div class="ft">店铺基础设置</div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">页面名称:</div>
                <div class="r"><el-input v-model="all.title" placeholder="请输入页面名称"></el-input></div>
              </div>
              <div class="ft" style="font-size: 16px;">联系客服设置</div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">联系电话:</div>
                <div class="r"><el-input v-model="all.mobile" placeholder="请输入联系电话"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">联系客服:</div>
                <div class="r"><el-input v-model="all.contact" placeholder="请输入联系客服"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">微信二维码:</div>
                <div class="r">
                  <chuantu ref="chuantu" @getimg="getimg"></chuantu>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">其他联系信息:</div>
                <div class="r"><el-input v-model="all.other_contact" placeholder="请输入其他联系信息"></el-input></div>
              </div>
            </div>
            <div class="fright">
              <div class="shouji">
                  <div class="shouji_img flexcc" v-if="!all.qrcode">二维码</div>
                  <div class="shouji_img" v-if="all.qrcode"><img :src="all.qrcode"></div>
                  <div class="shouji_qita">{{all.qita}}</div>
              </div>
            </div>
          </div>
          <div style="height: 10px;width: 100%;background: #eaeaea;margin: 20px 0;"></div>
          <div class="flex" >
              <div class="fleft">
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">下单成功话术:</div>
                  <div class="r"><el-input v-model="all.order_info" placeholder="请输入下单成功话术"></el-input></div>
                </div>
                <div class="ft" style="font-size: 16px;">联系客服设置</div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">二维码说明:</div>
                  <div class="r"><el-input v-model="all.order_pic_info" placeholder="请输入二维码说明"></el-input></div>
                </div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">客服联系电话:</div>
                  <div class="r"><el-input v-model="all.order_contact" placeholder="请输入客服联系电话"></el-input></div>
                </div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">二维码展示:</div>
                  <div class="r">
                    <chuantu ref="chuantu2" @getimg="getimg2"></chuantu>
                  </div>
                </div>
              </div>
              <div class="fright">
                <div class="shouji2">
                  <div class="shouji_img flexcc" v-if="!all.order_pic">二维码</div>
                  <div class="shouji_img" v-if="all.order_pic"><img :src="all.order_pic"></div>
                </div>
              </div>
            </div>
            <div style="height: 100px;" class="flexcc">
              <el-button type="danger" size="medium" @click="xiayibu">下一步</el-button>
            </div>

        </div>

      </div>
    </div>
    <el-dialog title="根据已有直播页发布页面" :visible.sync="log" width="700px">
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
         <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="primary" @click="tongbugo">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../zujian/chuantu.vue";
  export default {
    components: {
      top,left,chuantu
    },
    name: "zhiboxiaoshou_fabu",
    data() {
      return {
          list:"",
          tongbuall:"",
          log:false,
          input:"",
          all:{
            title:"",//	wq店铺	是	string	无
            mobile:"",//	18056565656	是	string	电话
            contact:"",//	18056565656	是	string	联系方式
            qrcode:"",//	二维码	是	string	二维码
            order_info:"",//	下单返回话术	是	string	下单返回话术
            order_pic:"",//	3	是	string	下单返回图片
            order_pic_info:"",//	desc	是	string	下单返回图片描述
            account_id:"",//	0	是	string	无
            other_contact:"",	//0	是	string	其他联系方式
            order_contact:"",	//	是	string	下单后联系方式
          },
          all2:{
            qrcode:""
          }
      }
    },
    created() {
      if(this.$route.query.id){
        this.getxq()
      }
    },
    mounted() {

    },
    methods: {
      getimg:function(img){
        this.all.qrcode = img
      },
      getimg2:function(img){
        this.all.order_pic = img
      },
      xiayibu:function(){
        axios.post("/api/web/store/make",this.all)
          .then(response => {
            if(response.data.msg.code == 0){
              this.$router.push({
                path:'/zhiboxitong/zhiboxiaoshou/zhiboxiaoshou_fabu2',
                query:{
                  id:this.$route.query.id
                }
              })
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      getxq:function(){
        axios.get(`/api/web/store/info?id=${this.$route.query.id}`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.all = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      }

    }
  }
</script>

<style scoped lang="scss">
  .zhiboxiaoshou_fabu {
    background: #f2f2f2; color: #333;
    min-height: 100vh;
    /deep/ .el-breadcrumb{ font-size: 16px;}
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #eee;
    }
    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #fff;
    }
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #3A3E4B;height: 100%;}
      .right{ flex-grow: 1;padding: 10px;
        .zhiboxitong_right{
           height: calc(100vh - 90px); overflow: auto; background: #fff; border-radius: 5px; padding: 20px;
        }
        .fleft{
          width: 420px; padding-top: 50px;
          .ft{ font-size: 18px;margin-bottom: 30px;font-weight: bold;}
          .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
          .r{}
        }
        .fright{
          width: 300px; margin-left: 100px; padding-top: 50px;
          .shouji{ width: 300px;height: 700px;background: url('https://static.91haoka.cn/gantanhao/shouji.png'); background-size: 100%; padding-top: 197px;
            .shouji_img{width: 115px;height: 115px; border: 1px solid #CBCBCB;margin: 0 auto;border-radius: 5px;background: #eaeaea;
              img{ width: 115px;height: 115px;}
            }
            .shouji_qita{ margin-top: 190px;margin-left: 42px;width: 210px;}
          }

          .shouji2{ width: 300px;height: 600px;background: url('https://static.91haoka.cn/gantanhao/shouji2.png'); background-size: 100%; padding-top: 342px;
            .shouji_img{width: 120px;height: 120px; border: 1px solid #CBCBCB;margin: 0 auto;border-radius: 5px;background: #eaeaea;
              img{ width: 120px;height: 120px;}
            }
          }
        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
